<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3阴影</title>
    <style>
        body {
            padding: 20px;
            line-height: 24px;
        }

        .box {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 450px;
        }

        .left,
        .right,
        .top,
        .bottom {
            margin: 30px;
            width: 50px;
            height: 50px;
            line-height: 50px;
            border: 1px solid #000;
            text-align: center;

        }

        .left {
            box-shadow: -7px 0 5px -5px #333;
        }

        .right {
            box-shadow: 7px 0 5px -5px #333;
        }

        .top {
            box-shadow: 0 -7px 5px -5px #333;
        }

        .bottom {
            box-shadow: 0 7px 5px -5px #333;
        }

        .text {
            line-height: 83px;
            font-size: 18px;
        }
    </style>
</head>

<body>
    <p>外 box-shadow 前四个参数：x 偏移值、y 偏移值 、模糊半径、扩张半径。</p>
    <p>单侧投影的核心是第四个参数：扩张半径。这个参数会根据你指定的值去扩大或缩小投影尺寸，如果我们用一个负的扩张半径，而他的值刚好等于模糊半径，那么投影的尺寸就会与投影所属的元素尺寸完全一致，除非使用偏移量来移动他，否则我们将看不到任何投影。
    </p>
    <div class="box">
        <div class='left'>左</div>
        <p class="text">box-shadow: -7px 0 5px -5px #333</p>
    </div>
    <div class="box">
        <div class='right'>右</div>
        <p class="text">box-shadow: 7px 0 5px -5px #333</p>
    </div>
    <div class="box">
        <div class='top'>上</div>
        <p class="text">box-shadow: 0 -7px 5px -5px #333</p>
    </div>
    <div class="box">
        <div class='bottom'>下</div>
        <p class="text">box-shadow: 0 7px 5px -5px #333</p>
    </div>
</body>

</html>